<ol class="breadcrumb newcrumb">
    <li>
        <a href="#">
            <span><i class="fa fontello-home-outline"></i>
            </span>Home</a>
    </li>
    <li>UI Element</li>
    <li class="active">Button</li>
</ol>



<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header">
                <i class="fa fa-edit"></i>
                <h3 class="box-title">Buttons</h3>
            </div>
            <div class="box-body pad table-responsive">
                <p>Various types of buttons. Using the base class
                    <code>.btn</code>
                </p>
                <table class="table table-bordered">
                    <tr>
                        <th>Rounded</th>
                        <th>Large
                            <code>.btn-lg</code>
                        </th>
                        <th>Mini
                            <code>.btn-sm</code>
                        </th>
                        <th>Flat
                            <code>.btn-flat</code>
                        </th>
                        <th>Disabled
                            <code>.disabled</code>
                        </th>
                    </tr>
                    <tr>
                        <td>
                            <button class="btn btn-default">Default</button>
                        </td>
                        <td>
                            <button class="btn btn-default btn-lg">Default</button>
                        </td>
                        <td>
                            <button class="btn btn-default btn-sm">Default</button>
                        </td>
                        <td>
                            <button class="btn btn-default btn-flat">Default</button>
                        </td>
                        <td>
                            <button class="btn btn-default disabled">Default</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button class="btn btn-primary">Primary</button>
                        </td>
                        <td>
                            <button class="btn btn-primary btn-lg">Primary</button>
                        </td>
                        <td>
                            <button class="btn btn-primary btn-sm">Primary</button>
                        </td>
                        <td>
                            <button class="btn btn-primary btn-flat">Primary</button>
                        </td>
                        <td>
                            <button class="btn btn-primary disabled">Primary</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button class="btn btn-success">Success</button>
                        </td>
                        <td>
                            <button class="btn btn-success btn-lg">Success</button>
                        </td>
                        <td>
                            <button class="btn btn-success btn-sm">Success</button>
                        </td>
                        <td>
                            <button class="btn btn-success btn-flat">Success</button>
                        </td>
                        <td>
                            <button class="btn btn-success disabled">Success</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button class="btn btn-info">Info</button>
                        </td>
                        <td>
                            <button class="btn btn-info btn-lg">Info</button>
                        </td>
                        <td>
                            <button class="btn btn-info btn-sm">Info</button>
                        </td>
                        <td>
                            <button class="btn btn-info btn-flat">Info</button>
                        </td>
                        <td>
                            <button class="btn btn-info disabled">Info</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button class="btn btn-danger">Danger</button>
                        </td>
                        <td>
                            <button class="btn btn-danger btn-lg">Danger</button>
                        </td>
                        <td>
                            <button class="btn btn-danger btn-sm">Danger</button>
                        </td>
                        <td>
                            <button class="btn btn-danger btn-flat">Danger</button>
                        </td>
                        <td>
                            <button class="btn btn-danger disabled">Danger</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button class="btn btn-warning">Warning</button>
                        </td>
                        <td>
                            <button class="btn btn-warning btn-lg">Warning</button>
                        </td>
                        <td>
                            <button class="btn btn-warning btn-sm">Warning</button>
                        </td>
                        <td>
                            <button class="btn btn-warning btn-flat">Warning</button>
                        </td>
                        <td>
                            <button class="btn btn-warning disabled">Warning</button>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- /.box -->
        </div>
    </div>
    <!-- /.col -->
</div>
<!-- ./row -->
<div class="row">
    <div class="col-md-8">
        <!-- Block buttons -->
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Block Buttons</h3>
            </div>
            <div class="box-body">
                <button class="btn btn-default btn-block">.btn-block</button>
                <button class="btn btn-default btn-block btn-flat">.btn-block .btn-flat</button>
                <button class="btn btn-default btn-block btn-sm">.btn-block .btn-sm</button>
            </div>
        </div>
        <!-- /.box -->

        <!-- Horizontal grouping -->
        <div class='box'>
            <div class='box-header'>
                <h3 class='box-title'>Horizontal Button Group</h3>
            </div>
            <div class='box-body table-responsive pad'>
                <p>
                    Horizontal button groups are easy to create with bootstrap. Just add your buttons inside
                    <code>&lt;div class="btn-group"&gt;&lt;/div&gt;</code>
                </p>

                <table class='table table-bordered'>
                    <tr>
                        <th>Button</th>
                        <th>Icons</th>
                        <th>Flat</th>
                        <th>Dropdown</th>
                    </tr>
                    <!-- Default -->
                    <tr>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">Left</button>
                                <button type="button" class="btn btn-default">Middle</button>
                                <button type="button" class="btn btn-default">Right</button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default"><i class='fa fa-align-left'></i>
                                </button>
                                <button type="button" class="btn btn-default"><i class='fa fa-align-center'></i>
                                </button>
                                <button type="button" class="btn btn-default"><i class='fa fa-align-right'></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default btn-flat"><i class='fa fa-align-left'></i>
                                </button>
                                <button type="button" class="btn btn-default btn-flat"><i class='fa fa-align-center'></i>
                                </button>
                                <button type="button" class="btn btn-default btn-flat"><i class='fa fa-align-right'></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default">1</button>
                                <button type="button" class="btn btn-default">2</button>

                                <div class="btn-group">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Dropdown link</a>
                                        </li>
                                        <li><a href="#">Dropdown link</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <!-- ./default -->
                    <!-- Info -->
                    <tr>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-info">Left</button>
                                <button type="button" class="btn btn-info">Middle</button>
                                <button type="button" class="btn btn-info">Right</button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-info"><i class='fa fa-align-left'></i>
                                </button>
                                <button type="button" class="btn btn-info"><i class='fa fa-align-center'></i>
                                </button>
                                <button type="button" class="btn btn-info"><i class='fa fa-align-right'></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-info btn-flat"><i class='fa fa-align-left'></i>
                                </button>
                                <button type="button" class="btn btn-info btn-flat"><i class='fa fa-align-center'></i>
                                </button>
                                <button type="button" class="btn btn-info btn-flat"><i class='fa fa-align-right'></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-info">1</button>
                                <button type="button" class="btn btn-info">2</button>

                                <div class="btn-group">
                                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Dropdown link</a>
                                        </li>
                                        <li><a href="#">Dropdown link</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <!-- /. info -->
                    <!-- /.danger -->
                    <tr>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-danger">Left</button>
                                <button type="button" class="btn btn-danger">Middle</button>
                                <button type="button" class="btn btn-danger">Right</button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-danger"><i class='fa fa-align-left'></i>
                                </button>
                                <button type="button" class="btn btn-danger"><i class='fa fa-align-center'></i>
                                </button>
                                <button type="button" class="btn btn-danger"><i class='fa fa-align-right'></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-danger btn-flat"><i class='fa fa-align-left'></i>
                                </button>
                                <button type="button" class="btn btn-danger btn-flat"><i class='fa fa-align-center'></i>
                                </button>
                                <button type="button" class="btn btn-danger btn-flat"><i class='fa fa-align-right'></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-danger">1</button>
                                <button type="button" class="btn btn-danger">2</button>

                                <div class="btn-group">
                                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Dropdown link</a>
                                        </li>
                                        <li><a href="#">Dropdown link</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <!-- /.danger -->
                    <!-- warning -->
                    <tr>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-warning">Left</button>
                                <button type="button" class="btn btn-warning">Middle</button>
                                <button type="button" class="btn btn-warning">Right</button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-warning"><i class='fa fa-align-left'></i>
                                </button>
                                <button type="button" class="btn btn-warning"><i class='fa fa-align-center'></i>
                                </button>
                                <button type="button" class="btn btn-warning"><i class='fa fa-align-right'></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-warning btn-flat"><i class='fa fa-align-left'></i>
                                </button>
                                <button type="button" class="btn btn-warning btn-flat"><i class='fa fa-align-center'></i>
                                </button>
                                <button type="button" class="btn btn-warning btn-flat"><i class='fa fa-align-right'></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-warning">1</button>
                                <button type="button" class="btn btn-warning">2</button>

                                <div class="btn-group">
                                    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Dropdown link</a>
                                        </li>
                                        <li><a href="#">Dropdown link</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <!-- /.warning -->
                    <!-- success -->
                    <tr>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-success">Left</button>
                                <button type="button" class="btn btn-success">Middle</button>
                                <button type="button" class="btn btn-success">Right</button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-success"><i class='fa fa-align-left'></i>
                                </button>
                                <button type="button" class="btn btn-success"><i class='fa fa-align-center'></i>
                                </button>
                                <button type="button" class="btn btn-success"><i class='fa fa-align-right'></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-success btn-flat"><i class='fa fa-align-left'></i>
                                </button>
                                <button type="button" class="btn btn-success btn-flat"><i class='fa fa-align-center'></i>
                                </button>
                                <button type="button" class="btn btn-success btn-flat"><i class='fa fa-align-right'></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-success">1</button>
                                <button type="button" class="btn btn-success">2</button>

                                <div class="btn-group">
                                    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Dropdown link</a>
                                        </li>
                                        <li><a href="#">Dropdown link</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <!-- /.success -->
                </table>
            </div>
        </div>
        <!-- /.box -->


        <!-- /.box -->
        <!-- split buttons box -->
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Split buttons</h3>
            </div>
            <div class="box-body">
                <!-- Split button -->
                <p>Rounded slplit buttons:</p>
                <div class="margin">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">Action</button>
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-info">Action</button>
                        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-danger">Action</button>
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-success">Action</button>
                        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-warning">Action</button>
                        <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- flat split buttons -->
                <p>Flat split buttons:</p>
                <div class="margin">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-flat">Action</button>
                        <button type="button" class="btn btn-default btn-flat dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-info btn-flat">Action</button>
                        <button type="button" class="btn btn-info btn-flat dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-danger btn-flat">Action</button>
                        <button type="button" class="btn btn-danger btn-flat dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-success btn-flat">Action</button>
                        <button type="button" class="btn btn-success btn-flat dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-warning btn-flat">Action</button>
                        <button type="button" class="btn btn-warning btn-flat dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- end split buttons box -->

   

    </div>
    <!-- /.col -->
    <div class="col-md-4">
        <!-- Application buttons -->
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Application Buttons</h3>
            </div>
            <div class="box-body">
                <p>Add the classes
                    <code>.btn.btn-app</code>to an
                    <code>&lt;a></code>tag to achieve the following:</p>
                <a class="btn btn-app">
                    <i class="fa fontello-pencil"></i> Edit
                </a>
                <a class="btn btn-app">
                    <i class="fa fontello-camera-outline"></i> Take
                </a>
                <a class="btn btn-app">
                    <i class="fa fontello-bookmark"></i> Bookmark
                </a>
                <a class="btn btn-app">
                    <i class="fa fontello-download-outline"></i> Download
                </a>
                <a class="btn btn-app">
                    <i class="fa fontello-location-outline"></i> Location
                </a>
                <a class="btn btn-app">
                    <span class="badge bg-red">3</span>
                    <i class="fa fontello-bell"></i> Notifications
                </a>
                <a class="btn btn-app">
                    <span class="badge bg-green">300</span>
                    <i class="fa  fontello-basket"></i> Purchase
                </a>
                <a class="btn btn-app">
                    <span class="badge bg-purple">435</span>
                    <i class="fa fontello-users-outline"></i> Users
                </a>
                <a class="btn btn-app">
                    <span class="badge bg-teal">67</span>
                    <i class="fa fontello-inbox"></i> Inbox
                </a>
                <a class="btn btn-app">
                    <span class="badge bg-aqua">12</span>
                    <i class="fa fontello-thumbs-up-1"></i> Likes
                </a>
                <a class="btn btn-app">
                    <span class="badge bg-red">531</span>
                    <i class="fa fontello-facebook-circled"></i> Facebook
                </a>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
        <!-- Various colors -->
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Different colors</h3>
            </div>
            <div class="box-body">
                <p>Mix and match with various background colors. Use base class
                    <code>.btn</code>and add any available
                    <code>.bg-*</code>class</p>
                <!-- You may notice a .margin class added
                                    here but that's only to make the content
                                    display correctly without having to use a table-->
                <p>
                    <button class="btn bg-maroon btn-flat margin">.btn.bg-maroon.btn-flat</button>
                    <button class="btn bg-purple btn-flat margin">.btn.bg-purple.btn-flat</button>
                    <button class="btn bg-navy btn-flat margin">.btn.bg-navy.btn-flat</button>
                    <button class="btn bg-orange btn-flat margin">.btn.bg-orange.btn-flat</button>
                    <button class="btn bg-olive btn-flat margin">.btn.bg-olive.btn-flat</button>
                </p>

                <p>
                    <button class="btn bg-maroon margin">.btn.bg-maroon</button>
                    <button class="btn bg-purple margin">.btn.bg-purple</button>
                    <button class="btn bg-navy margin">.btn.bg-navy</button>
                    <button class="btn bg-orange margin">.btn.bg-orange</button>
                    <button class="btn bg-olive margin">.btn.bg-olive</button>
                </p>
            </div>
        </div>
        <!-- /.box -->



    </div>
    <!-- /.col -->
</div>
<!-- /. row -->
